@import 'base';


:root{
  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;
  
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyDark: #9baacf;
}

.container{
  width: 20vw;
  height: 20vw;
  background-color: var(--greyLight-1);
  border-radius: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .switch{
    display: flex;
    justify-content: center;
    align-items: center;

    input{display: none;}

    & input:checked{
      & ~ label{
        box-shadow: .3rem .3rem .6rem var(--greyLight-2),-.2rem -.2rem .5rem var(--white);
        &::after{
          left: 3.3rem;
          background: var(--greyLight-1);
        }
        &::before{
          opacity: 1;
        }
      }
    }

    &_1,&_2{
      label{
        display: block;
        width: 6rem;
        height: 3rem;
        box-shadow: .3rem .3rem .6rem var(--greyLight-2),-.2rem -.2rem .5rem var(--white);
        cursor: pointer;
        border-radius: 1.5rem;
        position: relative;
        z-index: 10;
        margin-right: 20px;
        display: flex;
        align-items: center;
        &::after{
          position: absolute;
          content:'';
          left: .4rem;
          width: 2.1rem;
          height: 2.1rem;
          border-radius: 50%;
          background: var(--greyDark);
          transition: all .4s ease;
        }
        &::before{
          content:'';
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background: linear-gradient(330deg,var(--primary-dark) 0%,var(--primary) 50%,var(--primary-light) 100%);
          opacity: 0;
          transition: all .4s ease;
        }
      }
    }
  }
}